<template>
  <div>
    <el-table style="margin: 10px 0px" border :data="trademarkArr">
      <!-- el-table-column:展示数据默认用div;也可以用插槽 -->
      <!-- <el-table-column label="序号" width="80px" align="center" type="index"> -->
      <!-- row:每一个已有品牌对象 -->
      <!-- <template #="{row,$index}">
              <h1>{{row.tmName}}</h1>
            </template> -->
      <!-- </el-table-column> -->
      <el-table-column
        label="序号"
        width="80px"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column label="品牌名称" prop="tmName"></el-table-column>
      <el-table-column label="品牌LOGO">
        <template #="{ row}">
          <img
            :src="
              row.logoUrl.substring(0, 7) == 'http://'
                ? `${row.logoUrl}`
                : `http://${row.logoUrl}`
            "
            alt=""
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column label="品牌操作">
        <template #="{ row}">
          <el-button
            type="primary"
            size="small"
            icon="edit"
            @click="updataTrademark(row)"
          ></el-button>
          <el-popconfirm
            :title="`您确定要删除${row.tmName}品牌？`"
            width="250px"
            icon="Delete"
            @confirm="removeTradMark(row.id)"
          >
            <template #reference>
              <el-button type="primary" size="small" icon="delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import {
  trademarkArr,
  formRef,
  dialogFormVisible,
  trademarkParams,
  getHasTrademark,
  pageNo,
} from "../index";
import { nextTick } from "vue";
import type { TradMark } from "@/api/product/trademark/type";
import { reqDeleteTrademark } from "@/api/product/trademark/index";
import { ElMessage } from "element-plus";
//修改品牌回调
const updataTrademark = (row: TradMark) => {
  //清空校验规则信息
  nextTick(() => {
    formRef.value.clearValidata("tmName");
    formRef.value.clearValidata("logoUrl");
  });
  //row:当前已有品牌
  console.log(row);
  dialogFormVisible.value = true;
  //展示已有品牌数据
  // trademarkParams.tmName = row.tmName;
  // trademarkParams.logoUrl = row.logoUrl;
  // trademarkParams.id = row.id;
  //ES6语法合并对象
  Object.assign(trademarkParams, row);
};
//气泡确定框回调
const removeTradMark = async (id: number) => {
  //点击删除已有品牌请求
  let result = await reqDeleteTrademark(id);
  console.log(result);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "删除品牌成功",
    });
    //再次获取已有品牌数据
    getHasTrademark(trademarkArr.value.length > 1 ? pageNo.value : pageNo.value - 1);
  } else {
    ElMessage({
      type: "error",
      message: "删除品牌失败",
    });
  }
};
</script>

<style scoped></style>
